<template>
  <div>
    <el-row align="middle">
      <el-col :span="20">
        <span class="descriptions-title">公众监督详情</span>
      </el-col>
      <el-col :span="4" style="text-align: right">
        <el-button :size="size" type="primary" icon="el-icon-arrow-left" @click="goBack">返回</el-button>
      </el-col>
    </el-row>
    <el-descriptions direction="horizontal" :column="1" :size="size" border>
      <el-descriptions-item label="反馈者信息">
        <el-tag effect="dark" color="#409EFF" style="margin-right: 5px; color: black; border: none">{{ tableData.feedbackUserName }}</el-tag>
        <el-tag effect="dark" color="#409EFF" style="margin-right: 5px; color: black; border: none">{{ tableData.sex === '0' ? '男' : '女' }}</el-tag>
        <el-tag effect="dark" color="#409EFF" style="margin-right: 5px; color: black; border: none">{{ tableData.birthday }}</el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="反馈网格信息">
        <el-tag effect="dark" color="#FFA500" style="margin-right: 5px; color: black; border: none">{{ tableData.province }}</el-tag>
        <el-tag effect="dark" color="#FFA500" style="margin-right: 5px; color: black; border: none">{{ tableData.city }}</el-tag>
        <el-tag effect="dark" color="#FFA500" style="margin-right: 5px; color: black; border: none">{{ tableData.address }}</el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="空气质量">
        <el-tag effect="dark" color="#67C23A" style="margin-right: 5px; color: black; border: none" v-if="tableData.rankId == '1'">一级</el-tag>
        <el-tag effect="dark" color="#FFFF00" style="margin-right: 5px; color: black; border: none" v-if="tableData.rankId == '2'">二级</el-tag>
        <el-tag effect="dark" color="#FFA500" style="margin-right: 5px; color: black; border: none" v-if="tableData.rankId == '3'">三级</el-tag>
        <el-tag effect="dark" color="#FF0000" style="margin-right: 5px; color: black; border: none" v-if="tableData.rankId == '4'">四级</el-tag>
        <el-tag effect="dark" color="#800080" style="margin-right: 5px; color: black; border: none" v-if="tableData.rankId == '5'">五级</el-tag>
        <el-tag effect="dark" color="#800000" style="margin-right: 5px; color: black; border: none" v-if="tableData.rankId == '6'">六级</el-tag>
        <el-tag effect="dark" color="#67C23A" style="margin-right: 5px; color: black; border: none" v-if="tableData.rankId == '1'">优</el-tag>
        <el-tag effect="dark" color="#FFFF00" style="margin-right: 5px; color: black; border: none" v-if="tableData.rankId == '2'">良好</el-tag>
        <el-tag effect="dark" color="#FFA500" style="margin-right: 5px; color: black; border: none" v-if="tableData.rankId == '3'">轻度污染</el-tag>
        <el-tag effect="dark" color="#FF0000" style="margin-right: 5px; color: black; border: none" v-if="tableData.rankId == '4'">中度污染</el-tag>
        <el-tag effect="dark" color="#800080" style="margin-right: 5px; color: black; border: none" v-if="tableData.rankId == '5'">重度污染</el-tag>
        <el-tag effect="dark" color="#800000" style="margin-right: 5px; color: black; border: none" v-if="tableData.rankId == '6'">严重污染</el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="反馈时间">
        <el-tag effect="dark" color="#FFA500" style="margin-right: 5px; color: black; border: none">{{ tableData.feedbackTime }}</el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="分派状态">
        {{ tableData.isAssigned ? '已指派网格员' : '未指派网格员' }}
      </el-descriptions-item>
      <el-descriptions-item label="反馈信息">
        {{ tableData.feedbackContent }}
      </el-descriptions-item>
    </el-descriptions>
    <el-row v-if="!tableData.isAssigned" :gutter="20" style="margin-top: 20px">
      <el-col :span="16">
        <el-select v-model="selectedUser" placeholder="请选择用户">
          <el-option v-for="item in users" :key="item.uid" :label="item.name" :value="item.uid"> </el-option>
        </el-select>
        <el-button type="primary" @click="assignUser">指派</el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import $axios from '../components/utils/axios'

const route = useRoute()
const router = useRouter()
const feedbackId = ref(route.params.id)
const tableData = ref({})
const size = ref('medium')
const selectedUser = ref(null)
const users = ref([
  {
    uid: 0,
    name: ''
  }
])

const init = async () => {
  console.log(feedbackId.value)
  const path = `/api/feedback/getFeedbackDetail/${feedbackId.value}`
  const { data: res } = await $axios.get(path)
  if (res.code === '200') {
    tableData.value = res.data
  }

  const userPath = '/api/admin/getAllGridMan'
  const { data: userRes } = await $axios.get(userPath)
  if (userRes.code === '200') {
    users.value = userRes.data
  }
}

const goBack = () => {
  router.go(-1)
}

const assignUser = async () => {
  console.log(`Assigning user: ${selectedUser.value}`)
  console.log('feedbackid', feedbackId.value)
  try {
    const assignPath = '/api/feedback/assign'
    const payload = {
      feedbackId: feedbackId.value,
      userId: selectedUser.value
    }
    const { data: res } = await $axios.post(assignPath, payload)
    if (res.code === '00000') {
      // 更新成功后，您可以选择做其他操作，比如重新加载数据或显示成功消息
      tableData.value.isAssigned = true
      console.log('分配成功')
    } else {
      console.error('分配失败', res.message)
    }
  } catch (error) {
    console.error('请求错误', error)
  }
}

init()
</script>

<style scoped>
.descriptions-title {
  font-size: 18px;
  font-weight: bold;
}
</style>
